<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .mheader {
            width: 100%;
            height: 48px;
            background-color: #41bf54;
            position: relative;
        }

        .mheader input {
            position: absolute;
            width: 80%;
            height: 30px;
            border-radius: 5px;
            border: none;
            left: 10px;
            top: 10px;
            text-indent: 2em;
        }

        .mheader img {
            position: absolute;
            width: 20px;
        }

        .search {
            left: 12px;
            top: 15px;
        }

        .scan {
            top: 15px;
            right: 70px;
        }

        .chat {
            width: 25px;
            top: 15px;
            right: 10px;
        }
        .mfooter{
            width: 100%;
            height: 64px;
            position: fixed;
            left: 0;
            bottom: 0;
            text-align: center;
            border-top: 1px solid #eee;
        }
        .mfooter .item{
            width: 20%;
            float: left;
        }
        .mfooter .item img{
            width: 45px;
        }
        .mfooter .item span{
            font-size: 18px;
            color: #999;
        }
    </style>
</head>

<body>
    <div id="box">
        <myheader></myheader>
        <myfooter></myfooter>
    </div>
    <template id="myH">
        <header class="mheader">
            <input type="text" :placeholder="msg">
            <img src="./images/ic_chat_white.png" alt="" class="chat">
            <img src="./images/ic_scan_gray.png" alt="" class="scan">
            <img src="./images/ic_search_gray.png" alt="" class="search">
        </header>
    </template>
    <template id="myT">
        <footer class="mfooter">
            <div class="item">
                <img src="./images/1.png" alt=""></br>
                <span>首页</span>
            </div>
            <div class="item">
                <img src="./images/2.png" alt=""></br>
                <span>书影音</span>
            </div>
            <div class="item">
                <img src="./images/3.png" alt=""></br>
                <span>广播</span>
            </div>
            <div class="item">
                <img src="./images/4.png" alt=""></br>
                <span>小组</span>
            </div>
            <div class="item">
                <img src="./images/5.png" alt=""></br>
                <span>我的</span>
            </div>
        </footer>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {

            },
            components: {
                myheader: {
                    template: '#myH',
                    data(){
                        return{
                             msg:"请输入搜索的内容"
                        }
                    } 
                },
                myfooter: {
                    template: "#myT",
                    data() {
                        return {
                            footmsg: "底部数据"
                        }
                    },
                    methods: {
                        fn() {
                            console.log(1);
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>